<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list {
            width: 200px;
            height: 150px;
            background-color: pink;
            overflow: auto;
        }

        .news {
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="test"></div>

    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 用于将jsx转换为js -->
    <script text="text/javascript" src="./React-js/16.8/babel.min.js"></script>

    <script type="text/babel">

        class NewList extends React.Component {
            state = {
                newsArr: []
            }
            componentDidMount() {
                setInterval(() => {
                    const { newsArr } = this.state
                    // 模拟一条新数据
                    const news = '新闻' + (newsArr.length + 1)
                    // es6语法，添加进行
                    this.setState({ newsArr: [news, ...newsArr] })
                }, 1000)
            }
            getSnapshotBeforeUpdate() {
                // 获取内容整体高度
                return this.refs.list.scrollHeight
            }
            componentDidUpdate(preProps, preState, height) {
                console.log(height);
                this.refs.list.scrollTop += this.refs.list.scrollHeight - height
            }

            render() {
                return (
                    <div className="list" ref="list">
                        {
                            this.state.newsArr.map((el, i) => {
                                return <div key={i} className="news">{el}</div>
                            })
                        }
                        {/*
                             <div className="news">1</div>
                       <div className="news">2</div>
                       <div className="news">3</div>
                       <div className="news">4</div>
                       <div className="news">5</div>
                       <div className="news">6</div>
                        */}

                    </div>
                )
            }
        }

        ReactDOM.render(<NewList count={66} />, document.querySelector('#test'))
    </script>
</body>

</html>